Javascript

Communication avec un serveur

Historique

XMLHttpRequest

Créé par Microsoft puis adopté par Mozilla puis standardisé par le W3C.

A sa création, le XML était le format standard d'échange de données, d'où son nom.

C'est un constructeur d'objets permettant d'interagir avec des serveurs sans rafraîchir entièrement la page.

let req = new XMLHttpRequest();

req.open('GET','http://mpfc/back/modeles/instruction/liste/?page=1');

req.onload = function() { console.log(req.status,req.responseText); }

req.onerror = function(e) { console.error(e); }

req.send();

fetch

API qui succède à XMLHttpRequest

fetch('http://mpfc/back/modeles/instruction/liste/?page=1')
.then(response => response.json())
.then(dataObj => console.log(dataObj))
.catch(e => console.error(e));

let form = document.querySelector('form');

fetch('http://mpfc/back/modeles/instruction/', {
  method: 'post',
  body: new FormData(form)
});

fetch

avec Async/Await

async function fetchData() {

  try {

    let response = await fetch('http://mpfc/instruction/?page=1');

    if (!response.ok) throw new Error("erreur " + response.status);

    let dataObj = await response.json();

    console.log(dataObj);

  } catch(e) {
    console.error(e);
  }
}